<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>添加任务</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../css/oksub.css">
	<script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
</head>
<body>
<div class="ok-body">
	<!--form表单-->
	<form class="layui-form layui-form-pane ok-form" lay-filter="form_body">
		<div class="layui-form-item">
			<label class="layui-form-label">校园用户</label>
			<div class="layui-input-block">
				<select id="cpdaily_users" name="cpdaily_user_id">
				</select>
			</div>
		</div>
		<!--<div class="layui-form-item">
			<label class="layui-form-label">验证码</label>
			<div class="layui-input-inline">
				<input type="text" name="mobileCode" placeholder="请输入验证码" autocomplete="off" class="layui-input">
			</div>
			<div class="layui-input-inline">
				<button class="layui-btn" id="sendCode" lay-submit lay-filter="sendCode">获取验证码</button>
			</div>
		</div>-->
		<div class="layui-form-item">
			<label class="layui-form-label">经度</label>
			<div class="layui-input-inline">
				<input type="text" name="longitude" placeholder="请输入经度" autocomplete="off" class="layui-input">
			</div>
			<label class="layui-form-label">纬度</label>
			<div class="layui-input-inline">
				<input type="text" name="latitude" placeholder="请输入纬度" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">外围签到</label>
			<div class="layui-input-block">
				<input type="checkbox" name="isMalposition" lay-skin="switch" lay-text="是|否" checked value="1">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">签到位置</label>
			<div class="layui-input-inline">
				<input type="text" name="position" placeholder="请输入签到位置" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">签到照片</label>
			<div class="layui-input-inline">
				<button type="button" class="layui-btn" id="signPhoto">
					<i class="layui-icon">&#xe67c;</i>上传图片
				</button>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">照片预览</label>
			<div class="layui-input-inline">
				<input type="hidden" id="signImageUrl">
				<img id="signImage" src="/images/avatar.png" width="40%" height="40%">
			</div>
		</div>
		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">填报信息</label>
			<div class="layui-input-block">
				<textarea name="abnormalReason" placeholder="请输入填报信息" class="layui-textarea"></textarea>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script>
	// var initListObj;
	//
	// function initList () {
	//
	// }

	layui.use(["element", "form", "laydate", "okLayer", "okUtils", "upload"], function () {
		let element = layui.element;
		let form = layui.form;
		let laydate = layui.laydate;
		let okLayer = layui.okLayer;
		let okUtils = layui.okUtils;
		let upload = layui.upload;

		var signPhotoUpload = upload.render({
			elem: '#signPhoto' //绑定元素
			,url: '/v1/cpdaily/sign/uploadImage' //上传接口
			,done: function(res){
				if (res.errCode != 0) {
					okLayer.redCryMsg(res.errMsg, function () {

					});
				} else {
					layui.$("#signImageUrl").val(res.data.imagePath);
					layui.$('#signImage').attr('src', "/images/sign/" + res.data.imagePath);
					okLayer.greenTickMsg("上传签到照片成功！", function () {
						// parent.layer.close(parent.layer.getFrameIndex(window.name));
					});
				}
				//上传完毕回调
			}
			,error: function(){
				okLayer.redCryMsg("上传签到照片失败！请联系开发者！", function () {

				});
			}
		});

		// initList();

		// console.log(initListObj);

		layui.$.ajax({
			url:"/v1/cpdaily/user/list",
			type:"GET",
			dataType:"json",
			success:function(result){
				console.log(result);
				if (result.code === 0) {
					var initListObj = result.data;
					layui.$.each(initListObj,function (index,value) {
						var option = '';
						if(initListObj.length != 0){
							var option = '';
							layui.$.each(initListObj,function (index,value) {
								option +="<option value='" + value.id + "'>" + "【" + value.schoolName + "】" + value.studentId + "：" + value.name + "</option>";
							});
						} else {
							var option = '<option value="-1">请选择！！！</option>';  //默认值
						}
						layui.$("#cpdaily_users").html("");
						layui.$("#cpdaily_users").append(option);
						form.render('select');
					});
				} else {
					okLayer.redCryMsg(result.msg, function () {
						// parent.layer.close(parent.layer.getFrameIndex(window.name));
					});
				}
			}});

		okLoading.close();

		form.on("submit(add)", function (data) {
			// var isMalposition = undefined;
			console.log(data.field);
			// var signUesrId = data.field.

			// console.log(form.val("form_body"));
			// console.log(data.field.isMalposition);
			// return false;
			// console.log(data);

			// var cpdaily_user_id = data.cpdaily_user_id;
			// var longitude = data.longitude;
			// var latitude = data.latitude;

			var isMalposition;
			if (data.field.isMalposition === "1") {
				isMalposition = 1;
			} else {
				isMalposition = 0;
			}

			if (data.field.cpdaily_user_id == "") {
				okLayer.redCryMsg("请添加今日校园用户之后再进行添加签到！", function () {
					// parent.layer.close(parent.layer.getFrameIndex(window.name));
				});
				return false;
			}

			if (data.field.latitude == "") {
				okLayer.redCryMsg("请输入纬度！", function () {
					// parent.layer.close(parent.layer.getFrameIndex(window.name));
				});
				return false;
			}

			if (data.field.longitude == "") {
				okLayer.redCryMsg("请输入经度！", function () {
					// parent.layer.close(parent.layer.getFrameIndex(window.name));
				});
				return false;
			}

			if (data.field.position == "") {
				okLayer.redCryMsg("请输入签到位置！", function () {
					// parent.layer.close(parent.layer.getFrameIndex(window.name));
				});
				return false;
			}

			// var abnormalReason = data.abnormalReason;
			// var position = data.position;

			var sign_body = {
				"signUser" : {
					"id" : data.field.cpdaily_user_id
				},
				"signInfo" : {
					"longitude" : data.field.longitude,
					"latitude" : data.field.latitude,
					"isMalposition" : isMalposition,
					"abnormalReason" : data.field.abnormalReason,
					"signPhotoUrl" : layui.$("#signImageUrl").val(),
					"position" : data.field.position,
					"isNeedExtra" : 0
				}
			};

			// console.log(sign_body);

			if (data.field.cpdaily_user_id === -1) {
				okLayer.redCryMsg("您还没有添加今日校园用户！");
				return false;
			}

			layui.$.ajax({
				url:"/v1/cpdaily/sign/add",
				type:"POST",
				data:JSON.stringify(sign_body),
				dataType:"json",
				contentType:"application/json;charset=UTF-8",
				success:function(result){
					if (result.errCode === 0) {
						okLayer.greenTickMsg("添加成功！", function () {
							parent.layer.close(parent.layer.getFrameIndex(window.name));
						});

						// okLayer.greenTickMsg("获取验证码成功。", function () {
						// 	layui.$(data.elem).html(result.data.countdown + "秒");
						// 	layui.$(data.elem).addClass("layui-btn-disabled").attr("disabled",true);
						// 	waitTimer = setInterval(waitCode, 1000);
						// 	// parent.layer.close(parent.layer.getFrameIndex(window.name));
						// });
					} else {
						okLayer.redCryMsg(result.errMsg, function () {
							// parent.layer.close(parent.layer.getFrameIndex(window.name));
						});
					}
				}});

			// okUtils.ajax("/v1/cpdaily/user/add", "post", data.field, true).done(function (response) {
			// 	console.log(response);
			// 	okLayer.greenTickMsg("添加成功", function () {
			// 		parent.layer.close(parent.layer.getFrameIndex(window.name));
			// 	});
			// }).fail(function (error) {
			// 	console.log(error);
			// });
			return false;
		});

		/*form.on("submit(sendCode)", function (data) {
			if (data.field.moblie == "") {
				okLayer.redCryMsg("请输入手机号！");
				return false;
			}

			var mobile = {mobile:data.field.mobile};

			//console.log(data);

			layui.$.ajax({
				url:"/v1/cpdaily/mobile/sendCode",
				type:"POST",
				data:JSON.stringify(mobile),
				dataType:"json",
				contentType:"application/json;charset=UTF-8",
				success:function(result){
					if (result.errCode == 0) {

						if (result.data.tipMsg != "") {
							okLayer.greenTickMsg(result.data.tipMsg);
						} else {
							okLayer.greenTickMsg("获取验证码成功。");
						}

						layui.$(data.elem).html(result.data.countdown + "秒");
						layui.$(data.elem).addClass("layui-btn-disabled").attr("disabled",true);
						waitTimer = setInterval(waitCode, 1000);
					} else {
						okLayer.redCryMsg(result.errMsg, function () {
							// parent.layer.close(parent.layer.getFrameIndex(window.name));
						});
					}
				}});
			return false;
		});*/
	});

	var waitTimer = null;

	function waitCode () {
		var currentCount = parseInt(layui.$("#sendCode").html());

		if (currentCount == 0) {
			clearInterval(waitTimer);
			layui.$("#sendCode").html("获取验证码");
			layui.$("#sendCode").removeClass("layui-btn-disabled").attr("disabled",false);
		} else {
			layui.$("#sendCode").html((currentCount - 1) + "秒");
		}
	}
</script>
</body>
</html>
